<nzi-form [formName]="aliasForm" #AliasFormComponent>
  <form nz-form [formGroup]="aliasForm">
    <!-- 添加防CSRF验证字段 -->
    <input type="hidden" formControlName="timestamp" />
    <input type="hidden" formControlName="nonce" />
    <nz-form-item *ngIf="operation === 'creation'">
      <nz-form-label>别名<span class="required-icon">*</span></nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="aliasName" placeholder="请输入别名名称" [maxlength]="20">
        <!-- <nz-form-explain *ngIf="aliasForm.get('aliasName').dirty && aliasForm.get('aliasName').errors"
          class="from-help">
          <ng-container *ngIf="aliasForm.get('aliasName').errors">
            只能包含小写字母、数字和“-”，以小写字母或数字开头和结尾，长度限制在2-20之间
          </ng-container>
        </nz-form-explain>
        <nz-form-explain *ngIf="!getInvalidMessage('aliasName')">只能包含小写字母、数字和“-”，以小写字母或数字开头和结尾，长度限制在2-20之间
        </nz-form-explain> -->

        <nz-form-explain *ngIf="aliasForm.get('aliasName').dirty&&aliasForm.get('aliasName').errors" class="from-help">
          <ng-container *ngIf="aliasForm.get('aliasName').errors && !aliasForm.get('aliasName').hasError('duplicated')">
            只能包含小写字母、数字和“-”，以小写字母或数字开头和结尾，长度限制在2-20之间
          </ng-container>
          <ng-container *ngIf="aliasForm.get('aliasName').hasError('duplicated')">
            该名称已存在
          </ng-container>
          </nz-form-explain>
          <nz-form-explain *ngIf="!getInvalidMessage('aliasName')" class="help-text">
            只能包含小写字母、数字和“-”，以小写字母或数字开头和结尾，长度限制在2-20之间
        </nz-form-explain>

      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="operation === 'config'">
      <nz-form-label>别名<span class="required-icon">*</span></nz-form-label>
      <nz-form-control>
        <!--[ngStyle]="{'border':(aliasForm.get('alias').dirty && aliasForm.get('alias').errors) ? '1px solid #f04134':''}"-->
        <nz-select formControlName="alias" nzPlaceHolder="请选择别名" [class.has-error]="validAlias"
          [nzLoading]="isAliasLoading" [(ngModel)]="aliasId" (ngModelChange)="aliasIdChange($event)"
          nzNotFoundContent="没有可用的别名">
          <nz-option *ngFor="let object of aliasList" [nzLabel]="object?.aliasName" [nzValue]="object?.aliasId">
          </nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>描述</nz-form-label>
      <nz-form-control>
        <textarea nz-input rows="4" formControlName="description" placeholder="请输入别名描述"></textarea>
        <nz-form-explain *ngIf="aliasForm.get('description').dirty&& aliasForm.get('description').errors"
          [ngClass]="{'des-tip-left':operation == 'config'}">最大支持500个英文字母、数字、空格、逗号、句号、中文</nz-form-explain>
        <nz-form-explain *ngIf="!(aliasForm.get('description').dirty&& aliasForm.get('description').errors)"
          [ngClass]="{'des-tip-left':operation == 'config'}">最大支持500个英文字母、数字、空格、逗号、句号、中文</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <ng-container
      *ngIf="operation === 'creation' || ( operation === 'config' && aliasId != undefined && aliasId != '')">
      <nz-form-item>
        <nz-form-label>路由方法<span class="required-icon">*</span></nz-form-label>
        <nz-form-control>
          <nz-radio-group formControlName="routerMethod" [(ngModel)]="aliasRouter" (ngModelChange)="aliasRouterChange()"
            [nzButtonStyle]="'solid'">
            <label nz-radio-button nzValue="weight">按权重路由</label>
            <!--<label nz-radio-button nzValue="rule">按规则路由</label>-->
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [ngSwitch]="aliasRouter">
          <span *ngSwitchCase="'weight'">版本权重配置</span>
          <span *ngSwitchCase="'rule'">版本规则配置</span>
          <span class="required-icon">*</span>
        </nz-form-label>
        <ng-container [ngSwitch]="aliasRouter">
          <ng-container *ngSwitchCase="'weight'">
            <nz-form-control>
              <nz-select formControlName="version1" class="select-right position-top"
                [ngStyle]="{'border':(isDuplication===true || (aliasForm.get('version1').dirty && aliasForm.get('version1').errors == true)) ? '1px solid #f04134':'','box-shadow':(isDuplication===true || (aliasForm.get('version1').dirty && aliasForm.get('version1').errors == true))?'0 0 0 2px rgba(240, 65, 52, 0.2)':''}"
                [ngModel]="version1" (ngModelChange)="version1Change($event)" nzPlaceHolder="请选择版本"
                nzNotFoundContent="没有可用的版本" #version1Ele nzAllowClear>
                <nz-option *ngFor="let object of versions" [nzLabel]="object.label" [nzValue]="object.value">
                </nz-option>
              </nz-select>
              <input nz-input formControlName="weight1" nzOverlayClassName="numeric-input" class="input-number"
                [(ngModel)]="weight1" (ngModelChange)="weight1Change($event)" #inputWeight1Element />
              <span class="percent">%</span>
            </nz-form-control>
            <nz-form-control>
              <nz-select class="nz-select select-top select-right" formControlName="version2"
                [ngStyle]="{'border':(isDuplication===true || (aliasForm.get('version2').dirty &&aliasForm.get('version2').errors==true)) ? '1px solid #f04134':'','box-shadow':(isDuplication===true || (aliasForm.get('version2').dirty && aliasForm.get('version2').errors==true))?'0 0 0 2px rgba(240, 65, 52, 0.2)':''}"
                [ngModel]="version2" (ngModelChange)="version2Change($event)" nzPlaceHolder="请选择版本"
                nzNotFoundContent="没有可用的版本" #version2Ele nzAllowClear>
                <nz-option *ngFor="let object of versions" [nzLabel]="object.label" [nzValue]="object.value">
                </nz-option>
              </nz-select>
              <input nz-input formControlName="weight2" nzOverlayClassName="numeric-input" class="input-number"
                [(ngModel)]="weight2" (ngModelChange)="weight2Change($event)" #inputWeight2Element />
              <span class="percent">%</span>
              <nz-form-explain *ngIf="isDuplication==true" class="has-error">
                请选择不同的版本
              </nz-form-explain>
            </nz-form-control>
          </ng-container>
          <ng-container *ngSwitchCase="'rule'">
          </ng-container>
        </ng-container>
      </nz-form-item>
    </ng-container>
  </form>
</nzi-form>
